<template>
  <div class="city_body">
    <div class="city_list" ref="box">
        <div class="city_hot">
            <h2>热门城市</h2>
            <ul class="clearfix">
                <li v-for="hots in hot" :key="hots.id"
                    @click="handerToCity(hots.name,hots.id)"
                >{{hots.name}}</li>
            </ul>
        </div>
        <div class="city_sort">
            <div v-for="city in cities" :key="city.list.id">
                <h2 ref="h2">{{city.index}}</h2>
                <ul>
                    <li v-for="c in city.list" :key="c.id"
                        @click="handerToCity(c.name,c.id)"
                    >{{c.name}}</li>
                </ul>
            </div>	
        </div>
    </div>
    <div class="city_index">
        <ul>
            <li 
                v-for="(indexs,index) in cities" 
                :key="indexs.index"
                @click="gotocity(index)"
                :class="{active:index===checkNumber}"
            >{{indexs.index}}</li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    name:'City',
    data(){
        return {
            hot:[],
            cities:[],
            checkNumber: -1
        }
    },
    methods:{
        // 点击字母跳转到对应字母开头的城市
        gotocity(index){
            this.checkNumber = index
            this.$refs.box.scrollTop = this.$refs.h2[index].offsetTop
        },
        // 点击城市修改vuex里面的数据，并跳转now
        handerToCity(nm,id){
            this.$store.commit('city/CITY_INFO',{
                nm,
                id
            })
            // 跳转到now
            this.$router.push('movie/now')
        }
    },
    async created(){
        // 热门城市基本固定不变
        // 有本地存储信息 可直接获取
        let hot = localStorage.getItem('hot')
        let cities = localStorage.getItem('cities')
        if(hot&&cities){
            this.hot = JSON.parse(hot)
            this.cities = JSON.parse(cities)
            return
        }
        // 第一次请求城市数据
        let data = await this.$axios.get('/api/city')
        console.log(data);
        // 请求信息以后存储到本地存储
        localStorage.setItem('hot',JSON.stringify(data.data.hot))
        localStorage.setItem('cities',JSON.stringify(data.data.cities))

        this.hot = data.data.hot
        this.cities = data.data.cities
    }
}
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}
.city_body .city_index ul li.active{
    color: white;
    background: #e54847;
}
</style>